<template>
  <view class="post" @click="goToLiveDisplay(post.uid, post.id)">
    <view class="header-decor"></view>
    <view class="content">
      <view class="imgs">
        <view class="img" v-if="isShowImaghe()" v-for="(imageUrl, index) in post.imgs" :key="index">
          <image :src="imageUrl" mode="widthFix" class="image" />
        </view>
      </view>

      <view class="postText">
        {{ post.dynamicContent }}
      </view>

      <view class="userDisplay">
        <image class="profile" mode="aspectFill" :src="post.profileImg"></image>
        <view class="userName">{{ post.username }}</view>
        <view class="like">
          <image class="iconfont likeImg icon-icon"></image>
          <text class="count">{{ post.likeCount === 0 ? '0' : formatTrending(post.likeCount) }}</text>
        </view>
      </view>
    </view>
    <view class="footer-decor"></view>
  </view>
</template>

<script>
export default {
  name: "dynamic-post-xhd",
  props: {
    post: {
      type: Object,
      required: true,
    },
	index:{
		type: Number,
		required: true,
	},
	nowIndex:{
		type: Number,
		required: true,
	}
  },
  methods: {
	isShowImaghe(){
		// return (this.index+1>=this.nowIndex)&&(this.index<=this.nowIndex+5)?true:false  
		return true
	},
    formatTrending(number) {
      return number >= 10000 ? (number / 10000).toFixed(1) + 'W' : number;
    },
    goToLiveDisplay(uid, postId) {
      uni.navigateTo({
        url: "/pages/liveDisplay/liveDisplay?uid=" + uid + "&postId=" + postId,
      });
    },
  },
};
</script>

<style lang="scss">
.post {
  position: relative;
  background: linear-gradient(145deg, #f3f3f3, #ffffff);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 20rpx;
  // box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease-in-out;
  .header-decor, .footer-decor {
    position: absolute;
    width: 100%;
    height: 16px;
    background-size: contain;
  }

  .header-decor {
    top: 0;
  }

  .footer-decor {
    bottom: 0;
  }

  .content {
    padding: 20rpx;

    .imgs {
      display: flex;
      flex-wrap: wrap;
      gap: 10rpx;
      .img {
        width: 100%;
        border-radius: 12px;
        overflow: hidden;
        .image {
          width: 100%;
          border-radius: 12px;
        }
      }
    }

    .postText {
      margin: 16rpx 0;
      font-size: 28rpx;
      line-height: 1.6;
      color: #333333;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
      border-left: 4px solid #FF8C42;
      padding-left: 10rpx;
    }

    .userDisplay {
      display: flex;
      align-items: center;
      margin-top: 12rpx;

      .profile {
        width: 50rpx;
        height: 50rpx;
        border-radius: 50%;
        background-color: #e0e0e0;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
      }

      .userName {
        flex: 1;
        margin-left: 12rpx;
        font-size: 26rpx;
        font-weight: 600;
        color: #555555;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .like {
        display: flex;
        align-items: center;
        .likeImg {
          width: 36rpx;
          height: 36rpx;
          margin-right: 6rpx;
          // filter: drop-shadow(0px 2px 4px rgba(255, 120, 120, 0.5));
        }
        .count {
          font-size: 30rpx;
          // color: #ff7979;
        }
      }
    }
  }
}
</style>
